import React, { Component } from 'react'
import { Card, Button } from 'antd'
import { connect } from 'dva'

@connect(({ puzzlecards, loading }) => ({
  puzzlecards,
  loading: loading.models.puzzlecards
}))
export default class PuzzleCardsPage extends Component {
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({ type: 'puzzlecards/queryInitCards' })
  }
  onClickAdd = () => {
    const { dispatch } = this.props
    dispatch({ type: 'puzzlecards/queryInitCards' })
  }
  render() {
    const {
      puzzlecards: { data }
    } = this.props
    return (
      <div>
        {data.map(card => {
          return (
            <Card key={card.id} style={{ background: '#15826e' }}>
              <div>Q: {card.setup}</div>
              <div>
                <strong>A: {card.punchline}</strong>
              </div>
            </Card>
          )
        })}
        <div>
          <Button onClick={this.onClickAdd}>添加卡片</Button>
        </div>
      </div>
    )
  }
}
